<template>
  <view class="container">
    <image src="/static/images/login/phone_bg.png" mode="scaleToFill" class="bg-st" />
    <view class="otherNav">
      <view :style="'height:'+statusBarHeight+'px'"></view>
      <view class="otherNav-cont flex-center-between">
        <image class="otherNav-cont-left" src="/static/images/my/nav-icon.png" mode="" @click.stop="goback()">
        </image>
        <image class="otherNav-cont-right " src="/static/images/blacklist.png" mode="" @click.stop="showWin('2')">
        </image>
      </view>
    </view>
    <view class="userinfo">
      <view class="userinfo-top">
        <image class="head" :src="userinfo.avatar" mode=""></image>
        <!-- <text class="followInterest flex-center-center" >关注</text> -->

        <view class="status" @click.stop="showWin('1')">
          <image class="status-tag" v-if="userinfo.is_follow==1" src="/static/images/indexpage/guanzhu.png"></image>
          <image class="status-tag" v-else-if="userinfo.is_follow==2" src="/static/images/indexpage/yiguan.png"></image>
          <image class="status-tag" v-else-if="userinfo.is_follow==3" src="/static/images/indexpage/huguan.png"></image>
        </view>
      </view>
      <view class="userinfo-name">
        <text class="nickname">{{userinfo.nickname}}</text>
        <image class="vip" src="/static/images/my/vip.png" v-if="userinfo.invite_vip==1" mode=""></image>
        <image class="institution" src="/static/images/my/institution_vip_jy.png" v-if="userinfo.institution_vip_jy==1" mode=""></image>
        <image class="institution_vip_gys" src="/static/images/my/institution_vip_gys.png" v-if="userinfo.institution_vip_gys==1" mode=""></image>
        <image class="manufacturer" src="/static/images/my/manufacturer.png" v-if="userinfo.manufacturer_vip==1" mode=""></image>
      </view>
      <view class="aboutNews">
        <view v-for="(item,index) in aboutList" :key="index" class="aboutNews-part flex-center-center">
          <text class="num">{{item.num}}</text>
          <text class="label">{{item.label}}</text>
        </view>
      </view>
      <view class="instrumentTabs" v-if="true">
        <u-tabs :list="list" item-width="112rpx" bar-width="18" :bar-style="{'background-color':'#FF2544'}" bar-height="6" active-color="#333333" inactive-color="#999999" bg-color="#FFFFFF" :is-scroll="false" :current="current" @change="change"></u-tabs>
      </view>
      <view>

        <!--二手乐器   高度传0 -->
        <instrument @initPage="initPage" v-if="query.types==2" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="instrument"></instrument>
        <!--交流圈-->
        <currentCircle @initPage="initPage" v-if="query.types==1" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="currentCircle"></currentCircle>
        <!--求货 代加工-->
        <requestGoods @initPage="initPage" v-if="query.types==3" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="requestGoods"></requestGoods>
        <requestGoods @initPage="initPage" v-if="query.types==4" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="requestGoods2"></requestGoods>

      </view>
    </view>
    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </x-modal>
  </view>
</template>

<script>

import {
  normalyqList, manufacturer_vipyqList, institution_vipyqList
} from '@/const/index.js';
import api from '@/api/index.js';
import instrument from '../componets/instrument/index'
import requestGoods from '../componets/requestGoods/index'
import currentCircle from '../componets/currentCircle/index'
export default {
  components: {
    currentCircle,
    instrument,
    requestGoods
  },
  data() {
    return {
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      screenHeight: '',
      excessHeight: 146,
      current: 0,
      list: [],
      aboutList: [{
        label: '动态',
        num: '',
        value: ''
      }, {
        label: '获赞',
        num: '',
        value: ''
      }, {
        label: '关注',
        num: '',
        value: ''
      }, {
        label: '粉丝',
        num: '',
        value: ''
      }],
      contractObj: {
        title: '提示',
        content: '你确定要拉黑此用户吗?', // content: '是否对该用户取消关注?',//content: '是否将该用户移出黑名单?',
        isShow: false,
        showBotton: true,
        cancelText: '否',
        confirmText: '是',
        showOneBotton: false
      },
      query: {
        types: '1',//帖子类型:1=交流圈,2=二手乐器,3=求货,4=代加工
        position: '4',//请求位置:1=首页,2=我的关注,3=搜索,4=他人主页,5=我的点赞,6=我的动态
        lable: '',//请求位置:1=首页必传
        others_uid: '',
      },
      userinfo: {},
      indexStatus: '',//1关注 2 拉黑
      showThat: false
    }
  },
  onLoad(options) {
    this.query.others_uid = options.user_id
    const result = uni.getSystemInfoSync();
    let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
    this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom;
    this.getUserById()

    let that = this
    that.showThat = false
    that.$nextTick(() => {
      //机构 求货 //制造商 求货代加工
      if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
        that.list = normalyqList
      } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
        that.list = institution_vipyqList
      } else if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
        //拥有所有权限
        that.list = manufacturer_vipyqList
      } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
        //拥有所有权限
        that.list = manufacturer_vipyqList
      }
      that.showThat = true
    })
  },
  onShow() {
    this.newSearch()
  },
  methods: {
    initPage() {
      let that = this
      that.$nextTick(() => {
        this.newSearch()
      })
    },
    getUserById() {
      api.base.getUserById({ user_id: this.query.others_uid }).then(res => {
        if (res.code == 1) {
          this.userinfo = res.data
          this.aboutList[0].num = res.data.post_num
          this.aboutList[1].num = res.data.good_num
          this.aboutList[2].num = res.data.follow_num
          this.aboutList[3].num = res.data.fan_num
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack(1);
          }, 1000)
        }
      });
    },
    goback() {
      uni.navigateBack()
    },
    change(index) {
      this.current = index;
      this.query.types = this.list[index].value
      console.log('types' + this.query.types)
      this.newSearch()
    },
    onSearch(type) {
      if (type == 'clear') {
        this.query.search = ''
      };
      this.newSearch()
    },
    newSearch() {
      this.$nextTick(() => {
        let keyObj = ''
        if (this.query.types == 1) {
          keyObj = 'currentCircle'
        } else if (this.query.types == 2) {
          keyObj = 'instrument'
        } else if (this.query.types == 3) {
          keyObj = 'requestGoods'
        } else if (this.query.types == 4) {
          keyObj = 'requestGoods2'
        }
        this.$refs[keyObj].init();
      })
    },
    cancel(e) {
      this.contractObj.isShow = false
    },
    confirm(e) {

      //关注
      if (this.indexStatus == 1) {
        api.base.getTrendsFollow({ third_uid: this.query.others_uid }).then(res => {
          if (res.code == 1) {
            this.userinfo.is_follow = res.data.status
            uni.$u.toast(res.msg)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        });
      } else if (this.indexStatus == 2) {
        if (this.userinfo.is_black == true) {//已经拉黑
          api.base.getUserdelete({ user_id: this.query.others_uid }).then(res => {
            if (res.code == 1) {
              this.userinfo.is_black = false
              uni.$u.toast(res.msg)
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          });
        } else {
          api.base.getUserblack({ user_id: this.query.others_uid }).then(res => {
            if (res.code == 1) {
              this.userinfo.is_black = true
              uni.$u.toast(res.msg)
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          });
        }
      }
      this.contractObj.isShow = false
    },
    showWin(index) {
      this.indexStatus = index
      if (index == 1) {
        if (this.userinfo.is_follow == 1) {
          this.contractObj.content = '是否关注该用户?'
        } else if (this.userinfo.is_follow == 2 || this.userinfo.is_follow == 3) {
          this.contractObj.content = '是否对该用户取消关注?'
        }
      }
      else if (index == 2) {
        if (this.userinfo.is_black == true) {//已经拉黑
          this.contractObj.content = '是否将该用户移出黑名单?'
        } else {
          this.contractObj.content = '你确定要拉黑此用户吗?'
        }
      }
      this.contractObj.isShow = true
    }

  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;

  .bg-st {
    width: 100%;
    height: 100%;
  }

  .instrumentTabs {
    width: 686rpx;
    height: 98rpx;
    margin: 24rpx auto;
    background-color: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    box-shadow: 0px -2px 20px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    v-deep.u-tab-item {
      color: #333333 !important;
    }
  }

  .otherNav {
    position: fixed;
    top: 0;

    &-cont {
      width: 750rpx;
      height: 88rpx;
      padding: 0 32rpx;
      box-sizing: border-box;

      &-left {
        width: 48rpx;
        height: 48rpx;
      }

      &-right {
        width: 57.6rpx;
        height: 57.6rpx;
      }
    }
  }

  .userinfo {
    position: absolute;
    top: 338rpx;
    width: 750rpx;
    background: #f5f5f5;
    border-radius: 32rpx 32rpx 0rpx 0rpx;

    &-top {
      position: relative;
      width: 100%;
      padding: 0 32rpx;
      box-sizing: border-box;
      height: 154rpx;
      top: -60rpx;
      display: flex;
      // flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;

      .head {
        width: 154rpx;
        height: 154rpx;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
        border: 4rpx solid #ffffff;
        border-radius: 50%;
      }

      .followInterest {
        height: 56rpx;
        background: #ff2544;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        margin: 0 42rpx 24rpx 0;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 40rpx;
        text-align: center;
        padding: 0 32rpx;
      }
    }

    &-name {
      display: flex;
      align-items: center;
      height: 50rpx;
      margin: -44rpx 0 16rpx 32rpx;
      height: 50rpx;
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 42rpx;
      .nickname {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .vip {
        width: 46rpx;
        height: 32rpx;
        margin-left: 32rpx;
      }

      .institution {
        width: 96rpx;
        height: 32rpx;
        margin-left: 12rpx;
      }
      .institution_vip_gys {
        width: 116rpx;
        height: 32rpx;
        margin-left: 12rpx;
      }

      .manufacturer {
        width: 76rpx;
        height: 32rpx;
        margin-left: 12rpx;
      }
    }
    .status {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 190rpx;
      right: 50rpx;
      bottom: 20rpx;
      .status-tag {
        width: 120rpx;
        height: 50rpx;
      }
    }
    .aboutNews {
      width: 686rpx;
      height: 138rpx;
      margin: 0 auto;
      border-radius: 10px;
      background: var(--FFF, #fff);
      box-shadow: 0px -2px 20px 0px rgba(0, 0, 0, 0.1);
      display: flex;

      &-part {
        width: 25%;
        height: 100%;
        flex-direction: column;

        .num {
          height: 44rpx;
          font-size: 32rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .label {
          height: 34rpx;
          margin-top: 12rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
</style>